<template>
  <div class="dashboard-container">
    <!-- 顶部导航栏 -->
    <header class="top-header">
      <div class="header-left">
        <h1>数据可视化平台</h1>
      </div>
      <nav class="header-middle">
        <router-link to="/matplotlib" class="nav-item">matplotlib可视化</router-link>
        <router-link to="/seaborn" class="nav-item">seaborn可视化</router-link>
        <router-link to="/pyecharts" class="nav-item">pyecharts可视化</router-link>
      </nav>
      <div class="header-right">
        <span class="time-display">{{ currentTime }}</span>
        <div class="user-info">
          <div class="user-avatar">
            <img src="../assets/tx.jpg" alt="用户头像">
          </div>
          <span class="user-name">{{ userInfo.name }}</span>
        </div>
      </div>
    </header>
    <!-- 可视化图容器 - 左右结构布局 -->
    <div class="visualization-area">
      <!-- 左侧地图 -->
      <div class="left-section">
        <div class="visualization-box main-chart">
          <h3 class="chart-title">地图 - 地理数据可视化</h3>
          <div ref="chinaMapChart" style="width: 100%; height: calc(100% - 50px);"></div>
        </div>
      </div>
      <!-- 右侧上下布局 -->
      <div class="right-section">
        <div class="visualization-box">
          <h3 class="chart-title">3D柱状图 - 指标监控</h3>
          <div ref="bar3DChart" style="width: 100%; height: calc(100% - 50px);"></div>
        </div>
        <div class="visualization-box">
          <h3 class="chart-title">漏斗图 - 转化率分析</h3>
          <img src="../assets/funnel.png" alt="漏斗图" @click="openImageModal('../assets/funnel.png', '漏斗图 - 转化率分析')">
        </div>
      </div>
    </div>
    
    <!-- 图片模态框 -->
    <div class="image-modal" v-if="showModal" @click="closeImageModal">
      <div class="modal-content" @click.stop>
        <span class="close-button" @click="closeImageModal">&times;</span>
        <h3 class="modal-title">{{ modalTitle }}</h3>
        <img v-if="modalImage" :src="modalImage" alt="放大图片" class="modal-image">
        <div v-if="modalContent" v-html="modalContent" class="modal-data-content"></div>
        <div class="image-description">
          <p>点击图片外部区域关闭</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';
import 'echarts-gl';
import dataCSV from '../assets/data.csv?raw';

// 当前时间
const currentTime = ref(new Date().toLocaleString());

// 用户信息，默认已登录状态
const userInfo = reactive({
  name: 'Admin',
  role: '管理员',
  department: '数据分析部',
  avatar: 'https://secure.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y'
});

// 模态框状态
const showModal = ref(false);
const modalImage = ref('');
const modalTitle = ref('');
const modalContent = ref('');

// 打开图片模态框
const openImageModal = (imageSrc: string, title: string) => {
  modalImage.value = new URL(imageSrc, import.meta.url).href;
  modalTitle.value = title;
  modalContent.value = '';
  showModal.value = true;
  document.body.style.overflow = 'hidden';
};

// // 打开数据模态框
// const openDataModal = (title: string, content: string) => {
//   modalImage.value = '';
//   modalTitle.value = title;
//   modalContent.value = content;
//   showModal.value = true;
//   document.body.style.overflow = 'hidden';
// };

// 关闭模态框
const closeImageModal = () => {
  showModal.value = false;
  document.body.style.overflow = '';
};

// 图表引用
const chinaMapChart = ref<HTMLElement | null>(null);
const bar3DChart = ref<HTMLElement | null>(null);
let mapChart: echarts.ECharts | null = null;
let bar3D: echarts.ECharts | null = null;
let timer: ReturnType<typeof setInterval> | null = null;

// 处理CSV数据
const processCSVData = (data: string) => {
  const lines = data.split('\n');
  const headers = lines[0].split(',');
  const rows: any[] = [];
  
  for (let i = 1; i < lines.length; i++) {
    if (lines[i].trim() === '') continue;
    const values = lines[i].split(',');
    const row: any = {};
    
    for (let j = 0; j < headers.length; j++) {
      row[headers[j]] = values[j];
    }
    
    rows.push(row);
  }
  
  return rows;
};

// 省份名称标准化映射函数
const normalizeProvinceName = (provinceName: string): string => {
  // 省份名称映射表，将CSV中的简称映射为地图中的全称
  const provinceMap: { [key: string]: string } = {
    '北京': '北京市',
    '上海': '上海市',
    '天津': '天津市',
    '重庆': '重庆市',
    '河北': '河北省',
    '山西': '山西省',
    '辽宁': '辽宁省',
    '吉林': '吉林省',
    '黑龙江': '黑龙江省',
    '江苏': '江苏省',
    '浙江': '浙江省',
    '安徽': '安徽省',
    '福建': '福建省',
    '江西': '江西省',
    '山东': '山东省',
    '河南': '河南省',
    '湖北': '湖北省',
    '湖南': '湖南省',
    '广东': '广东省',
    '海南': '海南省',
    '四川': '四川省',
    '贵州': '贵州省',
    '云南': '云南省',
    '陕西': '陕西省',
    '甘肃': '甘肃省',
    '青海': '青海省',
    '台湾': '台湾省',
    '内蒙古': '内蒙古自治区',
    '广西': '广西壮族自治区',
    '西藏': '西藏自治区',
    '宁夏': '宁夏回族自治区',
    '新疆': '新疆维吾尔自治区',
    '香港': '香港特别行政区',
    '澳门': '澳门特别行政区'
  };
  
  return provinceMap[provinceName] || provinceName;
};

// 统计省份注册量和角色偏好
const getProvinceData = (data: any[]) => {
  const provinceCount: { [key: string]: number } = {};
  const provinceCharacters: { [key: string]: { [key: string]: number } } = {};
  
  data.forEach(row => {
    if (row.province) {
      // 标准化省份名称
      const normalizedProvince = normalizeProvinceName(row.province.trim());
      
      // 统计省份注册量
      provinceCount[normalizedProvince] = (provinceCount[normalizedProvince] || 0) + 1;
      
      // 统计省份角色偏好
      if (!provinceCharacters[normalizedProvince]) {
        provinceCharacters[normalizedProvince] = {};
      }
      
      if (row.favorite_character && row.favorite_character !== '未选择') {
        provinceCharacters[normalizedProvince][row.favorite_character] = 
          (provinceCharacters[normalizedProvince][row.favorite_character] || 0) + 1;
      }
    }
  });
  
  // 转换为地图数据格式
  const mapData = Object.keys(provinceCount).map(province => ({
    name: province,
    value: provinceCount[province],
    characters: provinceCharacters[province]
  }));
  
  // 按注册量排序
  mapData.sort((a, b) => b.value - a.value);
  
  return mapData;
};

// 统计季度性别活跃度数据
const getQuarterGenderActivityData = (data: any[]) => {
  const quarterGenderActivity: { [key: string]: { [key: string]: { [key: string]: number } } } = {};
  
  // 初始化数据结构
  ['Q1', 'Q2', 'Q3'].forEach(quarter => {
    quarterGenderActivity[quarter] = {
      '男': { '高活跃': 0, '中活跃': 0 },
      '女': { '高活跃': 0, '中活跃': 0 },
      '其他': { '高活跃': 0, '中活跃': 0 }
    };
  });
  
  // 统计数据
  data.forEach(row => {
    const quarter = row.register_quarter;
    const gender = row.gender;
    const activity = row.activity_level;
    
    // 只处理Q1-Q3的数据
    if (['Q1', 'Q2', 'Q3'].includes(quarter) && 
        ['男', '女', '其他'].includes(gender) && 
        ['高活跃', '中活跃'].includes(activity)) {
      quarterGenderActivity[quarter][gender][activity]++;
    }
  });
  
  // 转换为3D柱状图数据格式
  const bar3DData: any[] = [];
  const quarters = ['Q1', 'Q2', 'Q3'];
  const genders = ['男', '女', '其他'];
  const activityLevels = ['高活跃', '中活跃'];
  
  // 计算Q1和Q2的女性高活跃用户占比，用于展示环比增长
  const q1FemaleHighActive = quarterGenderActivity['Q1']['女']['高活跃'];
  const q1FemaleTotal = q1FemaleHighActive + quarterGenderActivity['Q1']['女']['中活跃'];
  const q1FemaleRatio = q1FemaleTotal > 0 ? q1FemaleHighActive / q1FemaleTotal : 0;
  
  const q2FemaleHighActive = quarterGenderActivity['Q2']['女']['高活跃'];
  const q2FemaleTotal = q2FemaleHighActive + quarterGenderActivity['Q2']['女']['中活跃'];
  const q2FemaleRatio = q2FemaleTotal > 0 ? q2FemaleHighActive / q2FemaleTotal : 0;
  
  const growthRate = q1FemaleRatio > 0 ? (q2FemaleRatio - q1FemaleRatio) / q1FemaleRatio * 100 : 0;
  
  // 生成柱状图数据
  quarters.forEach((quarter, i) => {
    genders.forEach((gender, j) => {
      activityLevels.forEach((activity, k) => {
        const value = quarterGenderActivity[quarter][gender][activity];
        bar3DData.push([i, j, value, quarter, gender, activity]);
      });
    });
  });
  
  return {
    bar3DData,
    quarters,
    genders,
    growthRate: Math.round(growthRate)
  };
};

// 获取角色Top3
const getTop3Characters = (characters: { [key: string]: number }) => {
  if (!characters) return [];
  
  return Object.entries(characters)
    .sort((a, b) => b[1] - a[1])
    .slice(0, 3)
    .map(([name, count]) => ({ name, count }));
};

// 计算角色偏好百分比
const calculateCharacterPercentage = (characters: { [key: string]: number }, characterName: string, total: number) => {
  if (!characters || !characters[characterName]) return 0;
  return Math.round((characters[characterName] / total) * 100);
};

// 实时更新时间和初始化图表
onMounted(async () => {
  // 设置定时器更新时间
  timer = setInterval(() => {
    currentTime.value = new Date().toLocaleString();
  }, 1000);
  
  // 添加ESC键关闭模态框
  const handleKeyDown = (e: KeyboardEvent) => {
    if (e.key === 'Escape' && showModal.value) {
      closeImageModal();
    }
  };
  window.addEventListener('keydown', handleKeyDown);
  
  try {
    // 使用更可靠的地图数据源
    let chinaJson;
    try {
      const response = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json');
      if (response.ok) {
        chinaJson = await response.json();
      } else {
        throw new Error('网络请求失败');
      }
    } catch (error) {
      console.warn('在线地图数据加载失败，使用备用数据:', error);
      // 使用更完整的备用地图数据
      chinaJson = {
        "type": "FeatureCollection",
        "features": [
          {
            "type": "Feature",
            "properties": { "name": "北京市" },
            "geometry": { 
              "type": "Polygon", 
              "coordinates": [[[116.0, 39.5], [117.0, 39.5], [117.0, 40.5], [116.0, 40.5], [116.0, 39.5]]] 
            }
          },
          {
            "type": "Feature",
            "properties": { "name": "上海市" },
            "geometry": { 
              "type": "Polygon", 
              "coordinates": [[[121.0, 31.0], [122.0, 31.0], [122.0, 32.0], [121.0, 32.0], [121.0, 31.0]]] 
            }
          },
          {
            "type": "Feature",
            "properties": { "name": "江苏省" },
            "geometry": { 
              "type": "Polygon", 
              "coordinates": [[[118.0, 31.5], [120.0, 31.5], [120.0, 33.5], [118.0, 33.5], [118.0, 31.5]]] 
            }
          },
          {
            "type": "Feature",
            "properties": { "name": "广东省" },
            "geometry": { 
              "type": "Polygon", 
              "coordinates": [[[112.0, 22.0], [115.0, 22.0], [115.0, 25.0], [112.0, 25.0], [112.0, 22.0]]] 
            }
          },
          {
            "type": "Feature",
            "properties": { "name": "浙江省" },
            "geometry": { 
              "type": "Polygon", 
              "coordinates": [[[119.0, 28.0], [122.0, 28.0], [122.0, 31.0], [119.0, 31.0], [119.0, 28.0]]] 
            }
          }
        ]
      };
    }
    
    echarts.registerMap('china', chinaJson);
    
    // 处理CSV数据
    const processedData = processCSVData(dataCSV);
    console.log('处理后的数据:', processedData.slice(0, 5)); // 调试用
    
    // 获取省份数据和季度性别活跃度数据
    const provinceData = getProvinceData(processedData);
    console.log('省份数据:', provinceData); // 调试用
    
    const { bar3DData, quarters, genders, growthRate } = getQuarterGenderActivityData(processedData);
    console.log('3D柱状图数据:', bar3DData.slice(0, 10)); // 调试用
    
    // 找出上海用户中偏好黎深的比例（使用标准化后的名称）
    const shanghaiData = provinceData.find(item => item.name === '上海市');
    const shanghaiTotal = shanghaiData ? shanghaiData.value : 0;
    const liShenPercentage = shanghaiData ? 
      calculateCharacterPercentage(shanghaiData.characters, '黎深', shanghaiTotal) : 0;
    
    // 初始化中国地图
    if (chinaMapChart.value) {
      mapChart = echarts.init(chinaMapChart.value);
      const mapOption = {
        backgroundColor: 'transparent', // 改动整体背景颜色
        title: {
          text: '中国地图 - 用户注册分布',
          subtext: `上海、北京、江苏注册量前三，上海用户偏好黎深比例达${liShenPercentage}%`,
          left: 'center',
          textStyle: {
            color: '#e0f7ff', // 改动标题颜色
            fontSize: 16
          },
          subtextStyle: {
            color: '#abd9e9', // 改动子标题颜色
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(16, 24, 39, 0.9)',
          borderColor: '#00c3ff',
          textStyle: {
            color: '#e0f7ff'
          },
          formatter: (params: any) => {
            const data = params.data;
            if (!data) return `${params.name}: 暂无数据`;
            
            let tooltip = `${params.name}: ${data.value}人<br/>`;
            
            if (data.characters) {
              const top3 = getTop3Characters(data.characters);
              if (top3.length > 0) {
                tooltip += '<br/>偏好角色Top3:<br/>';
                top3.forEach(char => {
                  const percentage = Math.round((char.count / data.value) * 100);
                  tooltip += `${char.name}: ${char.count}人 (${percentage}%)<br/>`;
                });
              }
            }
            
            return tooltip;
          }
        },
        visualMap: {
          min: 0,
          max: provinceData.length > 0 ? Math.max(...provinceData.map(item => item.value)) : 100,
          text: ['高', '低'],
          realtime: false,
          calculable: true,
          left: 'left',
          top: 'bottom',
          inRange: {
            color: ['#228B22', '#32CD32', '#7CFC00', '#ADFF2F', '#FFFF00'] // 改动地图上有数据区域颜色
          },
          textStyle: {
            color: '#e0f7ff' // 改动文字颜色
          }
        },
        series: [{
          name: '注册人数',
          type: 'map',
          map: 'china',
          roam: true,
          selectedMode: 'single',
          itemStyle: {
            borderColor: '#00c3ff', // 改动轮廓颜色
            borderWidth: 1,
            areaColor: '#61dd61' //改动地图颜色
          },
          emphasis: {
            itemStyle: {
              areaColor: '#FFA500', // 改动悬停时颜色
              borderWidth: 2,
              borderColor: '#00c3ff'
            }
          },
          data: provinceData
        }]
      };
      mapChart.setOption(mapOption);
      
      // // 添加地图点击事件
      // mapChart.on('click', (params: any) => {
      //   const data = params.data;
      //   if (!data) return;
        
      //   const top3 = getTop3Characters(data.characters);
      //   let content = `<div style="padding: 10px; color: #e0f7ff;">
      //     <h4>${params.name}用户数据分析</h4>
      //     <p>注册总人数: ${data.value}人</p>
      //     <h4>偏好角色分布:</h4>
      //     <ul style="list-style: none; padding-left: 0;">`;
        
      //   if (top3.length > 0) {
      //     top3.forEach(char => {
      //       const percentage = Math.round((char.count / data.value) * 100);
      //       content += `<li style="margin: 5px 0;">${char.name}: ${char.count}人 (${percentage}%)</li>`;
      //     });
      //   } else { 
      //     content += '<li>暂无角色偏好数据</li>';
      //   }
        
      //   content += '</ul></div>';
        
      //   openDataModal(`${params.name}用户分析`, content);
      // });
    }

    // 初始化3D柱状图
    if (bar3DChart.value) {
      bar3D = echarts.init(bar3DChart.value);
      const bar3DOption = {
          backgroundColor: 'transparent',
          title: {
            text: '季度性别活跃度分布',
            subtext: `Q2女性高活跃用户占比环比提升${growthRate}%`,
            left: 'center',
            textStyle: {
              color: '#e0f7ff',
              fontSize: 16
            },
            subtextStyle: {
              color: '#abd9e9',
              fontSize: 12
            }
          },
          tooltip: {
            backgroundColor: 'rgba(16, 24, 39, 0.9)',
            borderColor: '#00c3ff',
            textStyle: {
              color: '#e0f7ff'
            },
            formatter: (params: any) => {
              const value = params.data;
              return `季度: ${value[3]}<br/>性别: ${value[4]}<br/>活跃度: ${value[5]}<br/>用户数: ${value[2]}`;
            }
          },
          legend: {
            data: ['高活跃', '中活跃'],
            top: 'top',
            right: 'right',
            textStyle: {
              color: '#e0f7ff'
            }
          },
          xAxis3D: {
            type: 'category',
            data: quarters,
            name: '注册季度',
            nameTextStyle: {
              color: '#e0f7ff'
            },
            axisLine: { 
              lineStyle: { color: '#60efff' } 
            },
            axisLabel: { 
              color: '#e0f7ff',
              fontSize: 12
            }
          },
          yAxis3D: {
            type: 'category',
            data: genders,
            name: '性别',
            nameTextStyle: {
              color: '#e0f7ff'
            },
            axisLine: { 
              lineStyle: { color: '#60efff' } 
            },
            axisLabel: { 
              color: '#e0f7ff',
              fontSize: 12
            }
          },
          zAxis3D: {
            type: 'value',
            name: '用户数',
            nameTextStyle: {
              color: '#e0f7ff'
            },
            axisLine: { 
              lineStyle: { color: '#60efff' } 
            },
            axisLabel: { 
              color: '#e0f7ff',
              fontSize: 12
            }
          },
          grid3D: {
            boxWidth: 200,
            boxHeight: 100,
            boxDepth: 80,
            environment: '#1e293b',
            viewControl: {
              distance: 250,
              alpha: 25,
              beta: 40,
              autoRotate: false
            },
            light: {
              main: {
                intensity: 1.8,
                shadow: false,
                color: '#fff'
              },
              ambient: {
                intensity: 0.8,
                color: '#fff'
              }
            },
            postEffect: {
              enable: false
            }
          },
          series: [
            {
              type: 'bar3D',
              data: bar3DData.filter(item => item[5] === '高活跃'),
              name: '高活跃',
              shading: 'color',
              itemStyle: {
                color: '#FFD700', // 改动3D柱状图颜色
                opacity: 0.9
              },
              emphasis: {
                itemStyle: {
                  color: '#FFA500' // 改动3D柱状图颜色
                }
              }
            },
            {
              type: 'bar3D',
              data: bar3DData.filter(item => item[5] === '中活跃'),
              name: '中活跃',
              shading: 'color',
              itemStyle: {
                color: '#32CD32',  // 改动3D柱状图颜色
                opacity: 0.9
              },
              emphasis: {
                itemStyle: {
                  color: '#228B22' // 改动3D柱状图颜色
                }
              }
            }
          ]
        };
      bar3D.setOption(bar3DOption);
    }

    // 监听窗口大小变化
    const handleResize = () => {
      mapChart && mapChart.resize();
      bar3D && bar3D.resize();
    };
    window.addEventListener('resize', handleResize);

    // 组件卸载时清理
    onBeforeUnmount(() => {
      if (timer) clearInterval(timer);
      window.removeEventListener('keydown', handleKeyDown);
      window.removeEventListener('resize', handleResize);
      mapChart && mapChart.dispose();
      bar3D && bar3D.dispose();
    });
  } catch (error) {
    console.error('加载数据失败:', error);
  }
});
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap');
/* 全局重置样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.dashboard-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #0a0e17;
  background-image: 
    radial-gradient(circle at 50% 50%, rgba(37, 93, 217, 0.1) 0%, transparent 80%),
    linear-gradient(to bottom, rgba(0, 30, 60, 0.4) 0%, transparent 100%),
    repeating-linear-gradient(to right, transparent, transparent 50px, rgba(6, 78, 144, 0.05) 50px, rgba(6, 78, 144, 0.05) 51px),
    repeating-linear-gradient(to bottom, transparent, transparent 50px, rgba(6, 78, 144, 0.05) 50px, rgba(6, 78, 144, 0.05) 51px);
  color: #e0f7ff;
  font-family: 'Orbitron', sans-serif !important;
  overflow: hidden;
}

.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: rgba(16, 24, 39, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 195, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 195, 255, 0.2);
  color: #e0f7ff;
  width: 100%;
  height: 60px;
  flex-shrink: 0;
  z-index: 10;
}

.header-left h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: linear-gradient(90deg, #00c3ff, #60efff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
}

.header-middle {
  display: flex;
  gap: 30px;
}

.nav-item {
  color: #e0f7ff;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  padding: 5px 10px;
  font-size: 0.9rem;
  letter-spacing: 1px;
  font-family: 'Orbitron', sans-serif !important;
}

.nav-item:hover {
  color: #60efff;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.8);
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00c3ff, transparent);
  transition: width 0.3s ease;
}

.nav-item:hover::after {
  width: 100%;
}

.header-right {
  display: flex;
  gap: 20px;
  font-size: 0.9rem;
  align-items: center;
}

.time-display {
  background-color: rgba(0, 30, 60, 0.5);
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(0, 195, 255, 0.3);
  box-shadow: 0 0 5px rgba(0, 195, 255, 0.2);
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: rgba(0, 30, 60, 0.5);
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid rgba(0, 195, 255, 0.3);
  box-shadow: 0 0 5px rgba(0, 195, 255, 0.2);
  transition: all 0.3s ease;
  font-family: 'Orbitron', sans-serif !important;
}

.user-info:hover {
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.4);
  border-color: rgba(0, 195, 255, 0.5);
}

.user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(0, 195, 255, 0.5);
  box-shadow: 0 0 8px rgba(0, 195, 255, 0.4);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-name {
  font-weight: 500;
  letter-spacing: 1px;
  color: #60efff;
  text-shadow: 0 0 5px rgba(0, 195, 255, 0.5);
}

.visualization-area {
  display: flex;
  flex: 1;
  gap: 20px;
  padding: 20px;
  height: calc(100vh - 60px);
  overflow: hidden;
}

.left-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.right-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}

.visualization-box {
  background-color: rgba(16, 24, 39, 0.6);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 195, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 195, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.visualization-box:hover {
  border-color: rgba(0, 195, 255, 0.5);
  box-shadow: 0 12px 40px rgba(0, 195, 255, 0.2);
  transform: translateY(-2px);
}

.visualization-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00c3ff, transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.visualization-box:hover::before {
  opacity: 1;
}

.main-chart {
  flex: 1;
  min-height: 0;
}

.right-section .visualization-box {
  flex: 1;
  min-height: 0;
}

.chart-title {
  margin: 0 0 15px 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: #60efff;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(0, 195, 255, 0.4);
  font-family: 'Orbitron', sans-serif !important;
}

.visualization-box img {
  width: 100%;
  height: calc(100% - 50px);
  object-fit: contain;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  filter: brightness(0.9) contrast(1.1);
}

.visualization-box img:hover {
  transform: scale(1.02);
  filter: brightness(1) contrast(1.2);
  box-shadow: 0 8px 25px rgba(0, 195, 255, 0.3);
}

/* 图片模态框样式 */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  backdrop-filter: blur(10px);
}

.modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  background-color: rgba(16, 24, 39, 0.95);
  border-radius: 12px;
  padding: 20px;
  border: 2px solid rgba(0, 195, 255, 0.5);
  box-shadow: 0 20px 60px rgba(0, 195, 255, 0.3);
}

.close-button {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  color: #60efff;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1001;
}

.close-button:hover {
  color: #00c3ff;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.8);
  transform: scale(1.1);
}

.modal-title {
  color: #60efff;
  text-align: center;
  margin-bottom: 15px;
  font-size: 1.2rem;
  text-shadow: 0 0 8px rgba(0, 195, 255, 0.4);
}

.modal-image {
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid rgba(0, 195, 255, 0.3);
}

.modal-data-content {
  max-height: 70vh;
  overflow-y: auto;
  color: #e0f7ff;
  line-height: 1.6;
}

.modal-data-content h4 {
  color: #60efff;
  margin: 10px 0;
  text-shadow: 0 0 5px rgba(0, 195, 255, 0.4);
}

.modal-data-content ul {
  margin: 10px 0;
}

.modal-data-content li {
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 195, 255, 0.1);
}

.image-description {
  text-align: center;
  margin-top: 10px;
  color: #abd9e9;
  font-size: 0.9rem;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .visualization-area {
    flex-direction: column;
    gap: 15px;
    padding: 15px;
  }
  
  .left-section,
  .right-section {
    flex: none;
    height: auto;
  }
  
  .right-section {
    flex-direction: row;
    gap: 15px;
  }
  
  .right-section .visualization-box {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .header-middle {
    display: none;
  }
  
  .header-right {
    gap: 10px;
    font-size: 0.8rem;
  }
  
  .visualization-area {
    padding: 10px;
    gap: 10px;
  }
  
  .right-section {
    flex-direction: column;
  }
  
  .chart-title {
    font-size: 1rem;
  }
}
</style>